<template>
  <FullscreenCard class="wrapper">
    <h2>一维数组渲染成n*3结构，不用分割数据</h2>
    <div class="wrapper-data-list">
      <div
        class="wrapper-list-row"
        :class="[`bg${index%4}`]"
        v-for="index in Math.ceil(dataList.length/splitVal)"
        :key="index">
        <div class="wrapper-data-item" v-for="idx in splitVal" :key="idx">
          {{ index }}:{{ idx }}=>{{ (index-1)*splitVal+(idx-1) }}
          <div class="wrapper-data-item-val">{{ form[(dataList[(index-1)*splitVal+(idx-1)] || {}).code] }}</div>
          <div class="wrapper-data-item-name">{{ (dataList[(index-1)*splitVal+(idx-1)] || {}).label }}</div>
        </div>
      </div>
    </div>
    <h4>数据长度dataList.length:{{ dataList.length }},一行个数splitVal:{{ splitVal }}</h4>
    <pre>{{ dataList }}</pre>
    <pre>v-for="index in Math.ceil(dataList.length/splitVal)"</pre>
    <pre>    v-for="idx in splitVal"</pre>
    <pre>下标公式：(index-1)*splitVal+(idx-1)</pre>
  </FullscreenCard>
</template>

<script setup lang="ts">
import FullscreenCard from '@/components/FullscreenCard'

const splitVal = ref<any>(3)
const dataList = reactive<any>([
  { label: '额定交流功率', code: '2000', icon: '' },
  { label: '额定交流电压', code: '2001', icon: '' },
  { label: '额定交流电流', code: '2002', icon: '' },
  { label: '额定直流电压', code: '2003', icon: '' },
  { label: '额定直流电流', code: '2004', icon: '' },
  { label: '额定交流频率', code: '2005', icon: '' },
  { label: '直流输入功率', code: '2038', icon: '' },
  { label: '交流输出功率', code: '2039', icon: '' },
  { label: '无功功率', code: '2040', icon: '' },
  { label: '视在功率', code: '2041', icon: '' },
  { label: '功率因数', code: '2042', icon: '' },
  { label: '电网频率', code: '2043', icon: '' },
  { label: '启动条件', code: '2064', icon: '' },
  { label: '效率', code: '2048', icon: '' },
  { label: '电压不平衡度', code: '2060', icon: '' },
  { label: '电流不平衡度', code: '2061', icon: '' },
  { label: '漏电流', code: '2062', icon: '' },
  { label: '电网电压ud', code: '2065', icon: '' },
  { label: '电网电压uq', code: '2066', icon: '' },
  { label: '电网电流id', code: '2067', icon: '' },
  { label: '电网电流iq', code: '2068', icon: '' },
  { label: '风扇转速', code: '2069', icon: '' },
  { label: '扇区号指示', code: '2079', icon: '' },
  { label: 'A单元温度', code: '2044', icon: '' },
  { label: 'B单元温度', code: '2045', icon: '' },
  { label: 'C单元温度', code: '2046', icon: '' },
  { label: '电抗器温度', code: '2047', icon: '' },
  { label: '对地绝缘阻抗漏电流', code: '2050', icon: '' },
])
const form = reactive<any>({
  '2058': null,
  '2055': null,
  '2057': null,
  '2054': null,
  '2006': null,
  '2300': null,
  '2301': null,
  '2302': null,
  '2303': null,
  '2304': null,
  '2305': null,
  '2000': null,
  '2001': null,
  '2002': null,
  '2003': null,
  '2004': null,
  '2005': null,
  '2038': null,
  '2039': null,
  '2040': null,
  '2041': null,
  '2042': null,
  '2043': null,
  '2064': null,
  '2048': null,
  '2060': null,
  '2061': null,
  '2062': null,
  '2065': null,
  '2066': null,
  '2067': null,
  '2068': null,
  '2069': null,
  '2079': null,
  '2044': null,
  '2045': null,
  '2046': null,
  '2047': null,
  '2050': null,
})
</script>

<style lang="scss" scoped>
.wrapper {
	background-color: var(--vt-c-white);
  padding: 20px;
  overflow-y: auto;
}
.wrapper-data-list {
  margin-top: 20px;
}

.wrapper-list-row {
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9FF;

  &.bg1 {
    background-color: #F9F9FF;
  }

  &.bg2 {
    background-color: #FEFDF9;
  }

  &.bg3 {
    background-color: #F7FDFD;
  }

  &.bg4 {
    background-color: #F5FAFF;
  }

  .wrapper-data-item {
    flex: 1;
    text-align: center;
  }

  .wrapper-data-item-name {
    font-size: 18px;
    color: #999;
  }

  .wrapper-data-item-val {
    font-size: 14px;
  }
}
</style>
